<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        // Function to detect the user's operating system
        function getOS() {
            let userAgent = window.navigator.userAgent,
                platform = window.navigator.platform,
                macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
                windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
                iosPlatforms = ['iPhone', 'iPad', 'iPod'],
                os = 'an unknown OS';

            if (macosPlatforms.indexOf(platform) !== -1) {
                os = 'Mac OS';
            } else if (iosPlatforms.indexOf(platform) !== -1) {
                os = 'iOS';
            } else if (windowsPlatforms.indexOf(platform) !== -1) {
                os = 'Windows';
            } else if (/Android/.test(userAgent)) {
                os = 'Android';
            } else if (/Linux/.test(platform)) {
                os = 'Linux';
            }

            return os;
        }

        // Event listener for DOMContentLoaded
        document.addEventListener("DOMContentLoaded", function() {
            const osInfo = document.getElementById('os-info');
            osInfo.textContent = `You are visiting through ${getOS()}.`;
            // Load the navigation bar from nav.html
            fetch('nav.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('nav-placeholder').innerHTML = data;
                });

            // Fetch and insert content from ProjectContent.html
            fetch('ProjectContent.html')
                .then(response => response.text())
                .then(data => {
                    document.getElementById('content-placeholder').innerHTML = data;
                });
        });
    </script>
    <style>
        .header-title {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin: 0; /* Remove default margin */
        }
        main {
            background-color: #2e2e2e; /* Dark gray background */
            color: #d3d3d3; /* Light gray text */
            padding: 20px; /* Padding */
        }
    </style>
</head>
<body>
    <header>
        <h1 class="header-title">My Project</h1>
    </header>
    <div id="nav-placeholder"></div>
    <div id="os-info" class="os-info"></div>
    <main>
        <div id="content-placeholder"></div>
    </main>
    <footer style="text-align: center;">
        <p>&copy; 2024 Qiaoru Li</p>
    </footer>
</body>
</html>
